import React from 'react';
import { forwardRef } from 'react';
import './index.scss';

export interface RealtimeStatusProps {
  // 容器样式
  width?: number;
  height?: number;
  backgroundColor?: string;
  borderRadius?: number;
  
  // 实时标签样式
  labelText?: string;
  labelFontSize?: number;
  labelColor?: string;
  labelFontWeight?: number;
  labelFontFamily?: string;
  labelLetterSpacing?: number;
  
  // 进度条样式
  progressValue?: number; // 0-100
  progressWidth?: number;
  progressHeight?: number;
  progressGradientStart?: string;
  progressGradientEnd?: string;
  progressBackgroundColor?: string;
  progressBorderRadius?: number;
  
  // 指示器样式
  indicatorSize?: number;
  indicatorGradientStart?: string;
  indicatorGradientEnd?: string;
  indicatorBorderColor?: string;
  
  // 标签容器样式
  labelContainerWidth?: number;
  labelContainerHeight?: number;
  labelContainerBackgroundColor?: string;
  labelContainerBorderColor?: string;
  labelContainerBorderRadius?: number;
  labelContainerShadowColor?: string;
  labelContainerShadowBlur?: number;
  
  // 事件
  onClick?: () => void;
  
  // 其他属性
  style?: React.CSSProperties;
  className?: string;
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const RealtimeStatus = forwardRef<HTMLDivElement, RealtimeStatusProps>((props, ref) => {
  const {
    // 容器样式
    width = 400,
    height = 64,
    backgroundColor = 'rgba(29,37,45,0.9)',
    borderRadius = 8,
    
    // 实时标签样式
    labelText = '实时',
    labelFontSize = 16,
    labelColor = '#6FBDFF',
    labelFontWeight = 500,
    labelFontFamily = 'SourceHanSansSC',
    labelLetterSpacing = 0,
    
    // 进度条样式
    progressValue = 45, // 默认45%
    progressWidth = 301,
    progressHeight = 12,
    progressGradientStart = '#00FFF1',
    progressGradientEnd = '#008BFF',
    progressBackgroundColor = '#3E4455',
    progressBorderRadius = 9,
    
    // 指示器样式
    indicatorSize = 16,
    indicatorGradientStart = '#00FFF1',
    indicatorGradientEnd = '#008BFF',
    indicatorBorderColor = '#FFFFFF',
    
    // 标签容器样式
    labelContainerWidth = 58,
    labelContainerHeight = 30,
    labelContainerBackgroundColor = '#0B1E2F',
    labelContainerBorderColor = '#66B9FF',
    labelContainerBorderRadius = 5,
    labelContainerShadowColor = '#008BFF',
    labelContainerShadowBlur = 11,
    
    // 事件
    onClick,
    
    // 其他属性
    style = {},
    className = '',
    __designMode,
    componentId,
    _componentName,
    forwardRef: forwardRefProp,
    ...otherProps
  } = props;

  // 计算进度条实际宽度
  const actualProgressWidth = (progressValue / 100) * progressWidth;
  
  // 计算指示器位置 - 应该基于进度条的实际宽度，而不是绝对位置
  const indicatorLeft = Math.max(0, actualProgressWidth - indicatorSize / 2);

  const containerStyle: React.CSSProperties = {
    width: `${width}px`,
    height: `${height}px`,
    background: backgroundColor,
    borderRadius: `${borderRadius}px`,
    position: 'relative',
    display: 'flex',
    alignItems: 'center',
    padding: '0 12px',
    ...style
  };

  const labelContainerStyle: React.CSSProperties = {
    width: `${labelContainerWidth}px`,
    height: `${labelContainerHeight}px`,
    background: labelContainerBackgroundColor,
    border: `1px solid ${labelContainerBorderColor}`,
    borderRadius: `${labelContainerBorderRadius}px`,
    boxShadow: `inset 0px 0px ${labelContainerShadowBlur}px 0px ${labelContainerShadowColor}`,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: '12px'
  };

  const labelStyle: React.CSSProperties = {
    fontFamily: labelFontFamily,
    fontWeight: labelFontWeight,
    fontSize: `${labelFontSize}px`,
    color: labelColor,
    lineHeight: `${labelFontSize}px`,
    textAlign: 'left',
    letterSpacing: `${labelLetterSpacing}px`,
    userSelect: 'none'
  };

  const progressContainerStyle: React.CSSProperties = {
    width: `${progressWidth}px`,
    height: `${Math.max(progressHeight, indicatorSize)}px`, // 确保容器高度能容纳指示器
    position: 'relative',
    overflow: 'visible', // 改为visible，让指示器不被裁剪
    display: 'flex',
    alignItems: 'center' // 垂直居中
  };

  const progressBarStyle: React.CSSProperties = {
    width: `${actualProgressWidth}px`,
    height: `${progressHeight}px`, // 使用原始进度条高度
    background: `linear-gradient(90deg, ${progressGradientStart} 0%, ${progressGradientEnd} 100%)`,
    borderRadius: `${progressBorderRadius}px`,
    transition: 'width 0.3s ease',
    position: 'absolute',
    top: '50%',
    transform: 'translateY(-50%)' // 垂直居中
  };

  const indicatorStyle: React.CSSProperties = {
    width: `${indicatorSize}px`,
    height: `${indicatorSize}px`,
    background: `linear-gradient(180deg, ${indicatorGradientStart} 0%, ${indicatorGradientEnd} 100%)`,
    border: `1px solid ${indicatorBorderColor}`,
    borderRadius: '50%',
    position: 'absolute',
    left: `${indicatorLeft}px`,
    top: '50%',
    transform: 'translateY(-50%)',
    transition: 'left 0.3s ease'
  };

  const realtimeStatusClassName = ['realtime-status', className].filter(Boolean).join(' ');

  return (
    <div
      ref={ref}
      className={realtimeStatusClassName}
      style={containerStyle}
      onClick={onClick}
      data-component-id={componentId}
      data-component-name={_componentName}
      data-design-mode={__designMode}
      {...otherProps}
    >
      {/* 实时标签容器 */}
      <div className="realtime-status__label-container" style={labelContainerStyle}>
        <span className="realtime-status__label" style={labelStyle}>
          {labelText}
        </span>
      </div>
      
      {/* 进度条容器 */}
      <div className="realtime-status__progress-container" style={progressContainerStyle}>
        {/* 进度条背景 */}
        <div 
          className="realtime-status__progress-background" 
          style={{
            width: `${progressWidth}px`,
            height: `${progressHeight}px`,
            background: progressBackgroundColor,
            borderRadius: `${progressBorderRadius}px`,
            position: 'absolute',
            top: '50%',
            transform: 'translateY(-50%)'
          }} 
        />
        
        {/* 进度条 */}
        <div className="realtime-status__progress-bar" style={progressBarStyle} />
        
        {/* 指示器 */}
        <div className="realtime-status__indicator" style={indicatorStyle} />
      </div>
    </div>
  );
});

RealtimeStatus.displayName = 'RealtimeStatus';

export default RealtimeStatus; 